<template>
  <div class="main-layout">
    <!-- 顶部导航 -->
    <header class="header">
      <div class="header-left">
        <h1 class="logo">古建筑彩绘文物调查管理系统</h1>
      </div>
      <div class="header-center">
        <!-- 可选的中间内容 -->
      </div>
      <div class="header-right">
        <div class="user-info">
          <span>欢迎，{{ userInfo.name }}</span>
          <el-button size="small" @click="handleLogout">退出</el-button>
        </div>
      </div>
    </header>

    <div class="container">
      <!-- 左侧菜单 -->
      <aside class="sidebar" :class="{ 'collapsed': isCollapsed }">
        <!-- 折叠按钮 -->
        <div class="toggle-btn" @click="toggleCollapse">
          <component :is="isCollapsed ? ArrowLeft : ArrowRight" />
        </div>

        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical"
          @select="handleMenuSelect"
          :collapse="isCollapsed"
          :collapse-transition="false"
        >
          <template v-for="item in menuItems" :key="item.path">
            <el-menu-item v-if="!item.children" :index="item.path">
              <el-icon v-if="item.icon">
                <component :is="item.icon" />
              </el-icon>
              <span>{{ item.title }}</span>
            </el-menu-item>
            <el-sub-menu v-else :index="item.path">
              <template #title>
                <el-icon v-if="item.icon">
                  <component :is="item.icon" />
                </el-icon>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item
                v-for="child in item.children"
                :key="child.path"
                :index="child.path"
              >
                {{ child.title }}
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </aside>

      <!-- 主内容区域 -->
      <main class="main-content" :class="{ 'sidebar-collapsed': isCollapsed }">
        <div class="content-wrapper">
          <router-view></router-view>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import * as Icons from '@element-plus/icons-vue'
import { useUser } from '@/components/composables/usePersonalInfo'

// 引入图标
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

const { userInfo, handleLogout } = useUser()

interface MenuItem {
  path: string
  title: string
  icon?: keyof typeof Icons
  children?: MenuItem[]
}

// 菜单数据
const menuItems = ref<MenuItem[]>([
  {
    path: '/pc/category/',
    title: '首页',
    icon: 'House',
  },
  // {
  //   path: '/pc/data',
  //   title: '数据管理',
  //   icon: 'Document',
  //   children: [
  //     { path: '/pc/data/list', title: '文物列表' },
  //     { path: '/pc/data/add', title: '新增文物' },
  //   ],
  // },
  {
    path: '/pc/Personalinfo',
    title: '设置',
    icon: 'Setting',
  },
])

const router = useRouter()
const route = useRoute()

// 控制菜单折叠状态
const isCollapsed = ref(false)

// 切换折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}

// 当前激活的菜单项
const activeMenu = computed(() => {
  return route.path
})

// 菜单点击跳转
const handleMenuSelect = (path: string) => {
  router.push(path)
}
</script>

<style scoped lang="scss">
.main-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 20px;
    background-color: #2d3a4b;
    color: white;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

    .header-left {
      flex: 0 0 400px;
      .logo {
        margin: 0;
        font-size: 20px;
      }
    }

    .header-center {
      flex: 1;
      display: flex;
      justify-content: center;
    }

    .header-right {
      flex: 0 0 230px;
      display: flex;
      justify-content: flex-end;
      .user-info {
        display: flex;
        align-items: center;
        gap: 10px;
      }
    }
  }

  .container {
    display: flex;
    flex: 1;
    overflow: hidden;

    .sidebar {
      flex: 0 0 150px;
      height: 100%;
      background-color: #f3f5f7d0;
      border-right: 1px solid #e6e6e6;
      transition: flex-basis 0.3s ease;
      position: relative;

      &.collapsed {
        flex-basis: 30px;
      }

      .toggle-btn {
        position: absolute;
        right: -12px;
        top: 20px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #709ec97c;
        border: 1px solid #e6e6e6;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        svg {
          width: 14px;
          height: 14px;
          color: #0a0a0a;
        }
      }

      .el-menu-vertical {
        border-right: none;
        height: 100%;
        padding-top: 20px;
        background-color: #bdc7d38e;
      }
    }

    .main-content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      background-color: #f0f2f5;
      transition: padding-left 0.3s ease;

      &.sidebar-collapsed {
        padding-left: 10px;
      }

      .content-wrapper {
        background-color: #fff;
        border-radius: 4px;
        padding: 20px;
        min-height: calc(100% - 40px);
      }
    }
  }
}
</style>
